<template>
  <div class="design_container">
    <TopHeader />
    <div class="design_panel_content">
      <Pannel />
      <Edit />
      <div class="module_setting">
        <div class="module_setting_container">
          <div class="title">{{ activeComponent.name }}设置</div>
          <component
            v-bind="activeComponent"
            v-bind:is="`${activeComponent.type}Set`"
          >
          </component>
        </div>
      </div>
    </div>
    <ContextMenu />
  </div>
</template>
<script>
import { mapState } from "vuex";
import Edit from "./edit";
import Pannel from "./pannel";
import TopHeader from "@/components/Design/TopHeader.vue";
import ContextMenu from "@/components/Design/ContextMenu.vue";
import defaultSet from "@/components/Element/Page/defaultSet";
import PictureSet from "@/components/Element/Picture/PictureSet";
import SearchSet from "@/components/Element/Search/SearchSet";
import CarouselSet from "@/components/Element/Carousel/CarouselSet";
import TextsSet from "@/components/Element/Text/TextSet";
import TitleSet from "@/components/Element/Title/TitleSet";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      activeComponent: (state) => state.activeComponent,
    }),
  },
  methods: {},
  components: {
    TopHeader,
    ContextMenu,
    Edit,
    Pannel,
    defaultSet,
    PictureSet,
    SearchSet,
    CarouselSet,
    TextsSet,
    TitleSet,
  },
};
</script>
<style lang="scss" scoped>
.design_container {
  width: 100vw;
  height: 100vh;
  background: #eef0f4;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .design_panel_content {
    display: flex;
    flex: 1;
    .module_setting {
      width: 290px;
      min-width: 360px;
      height: 100%;
      padding: 2px 0 2px 5px;
      background: #f8f9fa;
      z-index: 102;
      box-sizing: border-box;
      position: relative;
      .module_setting_container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow-x: hidden;
      }

      .title {
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        font-size: 14px;
        font-weight: 900;
        color: #595961;
      }
    }
  }
}

::v-deep .ant-tabs-nav {
  width: 100% !important;
  display: flex !important;
  justify-content: space-around;
}
::v-deep .ant-tabs-tab-active {
  border-bottom: 4px #595961 solid;
  color: #333;
}
::v-deep .ant-tabs-ink-bar {
  width: 0 !important;
  background-color: none !important;
}
::v-deep .ant-tabs-nav .ant-tabs-tab:hover {
  color: #595967 !important;
}
::v-deep
  .ant-radio-group-solid
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background-color: #d0e5ff;
  border-color: #d0e5ff;
  color: #2589ff;
  font-weight: 600;
}
::v-deep
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  box-shadow: -1px 0 0 0 #d0e5ff;
}
::v-deep
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
  background-color: red !important;
}
</style>